<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>title</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css"/>
    <style>
        html, body {
            background-color: #f8f8f8;
        }
        #header {
        	height: 48px;
        	line-height: 48px;
        	background-color: #e62442;
        	color: #fff;
            overflow: hidden;
        }
        #header .header_left {
        	width: 20%;
            height: 100%;
            float: left;
        	padding-left: 18px;
        	box-sizing: border-box;
            display: -webkit-box;
            -webkit-box-align: center;
        }
        #header .header_left img {
        	height: 20px;
        	display: block;
        }
        #header .header_right {
        	width: 80%;
            height: 100%;
            float: left;
        	padding-right: 20%;
        	box-sizing: border-box;
        	font-size: 17px;
        	text-align: center;
        }
        .tap_active {
            background-color: rgba(0, 0, 0, 0.1);
        }
        .head{
            background: #e62442;
            /*height: 117px;*/
        }
        .time{
            text-align: center;
            height: 30px;
            line-height: 30px;
        }
        .time span{
            display: inline-block;
        }
        .time span img{
            width: 25px;
            /*height: 24px;*/
            display: block;
        }
        .online_time{
            font-size: 30px;
            line-height: 30px;
            color: white;
        }
        .desc{
            color: #ffefef;
            text-align: center;
            font-size: 15px;
            line-height: 15px;
            margin-top: 15px;
        }
        .switch{
            height: 50px;
            line-height: 50px;
            color: #333;
            background: white;
            padding: 0 15px;
        }
        .switch .left{
            font-size: 15px;
        }
        .right{
            float: right;
            width: 40px;
            height: 20px;
            border-top-right-radius: 10.5px;
            border-bottom-right-radius: 10.5px;
            border-bottom-left-radius: 10.5px;
            border-top-left-radius: 10.5px;
            /*margin-top: 15px;*/
            background: #ccc;
            border: 1px solid #ccc;
        }
        .right.active{
            background: #77dc14;
        }
        .circle{
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: white;
            float: left;
        }
        .circle.active{
            float: right;
        }
        .outer{
            padding: 14px;
            margin-right: -14px;
            float: right;
        }
        .info{
            padding: 0 15px;
            font-size: 13px;
            line-height: 18px;
            color: #999;
            margin-top: 12.5px;
        }
    </style>
</head>
<body>
    <div class="main">
    	<header id="header">
        	<div class="header_left" onclick="api.closeWin();" tapmode="tap_active">
        		<img src="../image/back.png">
        	</div>
        	<div class="header_right"></div>
        </header>
        <div class="head">
            <div class="time">
                <span><img src="../image/clock.png"></span>
                <span class="online_time"><span class="hour"></span>:<span class="minute"></span>:<span class="second"></span></span>
            </div>
            <div class="desc">今日累计在线时长</div>
        </div>
        <div class="switch">
            <span class="left">接单开关</span>
            <div class="outer" tapmode onclick="turnOnOff();">
                <span class="right">
                    <div class="circle"></div>
                </span>
            </div>
        </div>
        <div class="info">
            说明：开启接单开关后，开始计算每日累计在线时长，并可操作抢单及平台指派的订单，关闭开关后将结束每日累计时长，不可进行抢单操作，同时也不会收到平台指派的订单。
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript">

    var isOnline = false; // 默认没有开启开关的
    var totalTime = 0; // 默认时长为0
    var timer; // 定义定时器
    apiready = function(){
        $api.fixStatusBar(header);
        staffData = $api.getStorage('staff_data');
        $(".head").height(185-$('#header').height());
        isOnline = api.pageParam.is_online;
        totalTime = parseInt(api.pageParam.totalTime);
        caculateTime();
        // getInitData();

        api.addEventListener({
            name:'pause'
        }, function(ret, err){
            clearInterval(timer);
        });

        api.addEventListener({
            name: 'updateMyOnlineTime'
        }, function(ret, err){
            if( ret ){
                totalTime = ret.value.totalTime;
                caculateTime();
            }
        });
    };

    function caculateTime () {
        addTimer(totalTime);
        if(isOnline == 1){
            $(".right").addClass('active');
            $(".circle").addClass('active');
            timer = setInterval(function(){
                totalTime++;
                addTimer(totalTime);
            },1000);
        }
    };

    function turnOnOff () {
        openLoading();
        api.ajax({
            url: rootPath + '/api/staff/turn_off_on',
            method: 'post',
            data: {
                values: { 
                    staff_id: staffData.id,
                    staff_token: staffData.token,
                    isOnline: isOnline
                },
            }
        }, function(ret, err) {
            if (ret && ret.status == 200) {
                if(isOnline == 1){
                    isOnline = false;
                    $(".right").removeClass('active');
                    $(".circle").removeClass('active');
                    staffData.is_online = 0;
                    $api.setStorage('staff_data',staffData);
                    // 关闭那个socket_frame的定时器
                    api.sendEvent({
                        name: 'pauseTimer',
                    });
                    // 关闭这个定时器
                    clearInterval(timer);
                }else{
                    isOnline = 1;
                    $(".right").addClass('active');
                    $(".circle").addClass('active');
                    staffData.is_online = 1;
                    $api.setStorage('staff_data',staffData);
                    // 打开那个socket_frame的定时器
                    api.sendEvent({
                        name: 'continueTimer',
                    });
                    // 打开这个定时器
                    caculateTime();
                }
            }
            closeLoading();
        });
    };




    function addTimer (time) {
        var hour = add0(parseInt(time/3600));
        var minute = add0(parseInt((time%3600)/60));
        var miao = add0(parseInt((time%3600)%60));
        $(".hour").html(hour);
        $(".minute").html(minute);
        $(".second").html(miao);
    };

    function add0(m){return m<10?'0'+m:m }

</script>
</html>


